<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富通考勤</title>
    {{script}}
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 下面生成的月历样式 */
      .warp {
        width: 1000px;
        margin: 100px auto;
      }

      .calendar {
        width: 100%;
        border: 1px solid #666;
        border-right: none;
      }

      .calendar-title,
      .calendar-body .calendar-body-week {
        width: 100%;
        display: flex;
      }

      .calendar-title-item,
      .calendar-body-day {
        height: 40px;
        flex: 1;
        background-color: #fff;
        border-right: 1px solid #666;
      }

      .calendar-title-item {
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }

      .calendar-body .calendar-body-week {
        border-top: 1px solid #666;
      }
      .calendar-body-day {
        padding: 5px;
        flex: 1;
        background-color: #fff;
        border-right: 1px solid #666;
        height: 100px;
        font-size: 14px;
      }
      .calendar-body-day-line1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      .calendar-body-day-line2 {
        margin-top: 6px;
      }
      
      .calendar-body-day-line1-num {
        font-size: 20px;
        font-weight: bold;
        width: 40px;
        line-height: 40px;
        text-align: center;
      }

      .calendar-body-day-line1-status {
        color: #008d00;
        text-align: end;
      }
      
      .calendar-body-day-line1-status.err {
        color: #d10f0f;
      }
      .no-day {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <h1>富通考勤记录</h1>
    <div class="warp"></div>
    <script>
      renderCalendar(list[0].statDateStr);
      function renderCalendar(date) {
        let now = new Date(date);
        let month = now.getMonth() + 1;
        let year = now.getFullYear();
        const monthDays = new Date(year, month, 0).getDate();
        const mounthDaysArr = [];
        const firstDayWeek = new Date(year, month - 1, 1).getDay();

        const calendarTitle = `
                   <div class="calendar-title">
                        <div class="calendar-title-item">日</div>
                        <div class="calendar-title-item">一</div>
                        <div class="calendar-title-item">二</div>
                        <div class="calendar-title-item">三</div>
                        <div class="calendar-title-item">四</div>
                        <div class="calendar-title-item">五</div>
                        <div class="calendar-title-item">六</div>
                    </div>
            `;

        let calendarBody = `<div class="calendar-body">`;

        for (let i = 1; i <= monthDays; i++) {
          const week = (firstDayWeek + i - 1) % 7;
          const day = list.find(
            (item) =>
              item.statDateStr ===
              `${year}-${("0" + month).substr(-2)}-${("0" + i).substr(-2)}`
          );
          if (i === 1) {
            calendarBody += `<div class="calendar-body-week">`;
            calendarBody +=
              `<div class="calendar-body-day no-day"></div>`.repeat(week);
          }
          if (week === 0 && i !== 1) {
            calendarBody += `<div class="calendar-body-week">`;
          }

          if (day) {
            calendarBody += `
                <div class="calendar-body-day">
                    <div class="calendar-body-day-line1">
                        <div class="calendar-body-day-line1-num">${i}</div>
                        <div class="calendar-body-day-line1-status ${day.workStatusName !== '正常' ? 'err' : ''}">${
                          day.workStatusName
                        }</div>
                    </div>
                    <div class="calendar-body-day-line2">
                        上班：${
                            day.workStatus === 0
                            ? ""
                            : day.workClock
                            ? day.workClock.substring(11)
                            : "未打卡"
                        }
                    </div>
                    <div class="calendar-body-day-line2">
                        下班：${
                            day.offStatus === 0
                            ? ""
                            : day.offClock
                            ? day.offClock.substring(11)
                            : "未打卡"
                        }
                    </div>
                </div>
            `;
          } else {
            calendarBody += `
                <div class="calendar-body-day">
                    <div class="calendar-body-day-line1">
                        <div class="calendar-body-day-line1-num">${i}</div>
                        <div class="calendar-body-day-line1-status"></div>
                    </div>
                    <div class="calendar-body-day-line2"></div>
                    <div class="calendar-body-day-line2"></div>
                </div>
            `
          }
          
          if (i === monthDays) {
            calendarBody +=
              `<div class="calendar-body-day no-day"></div>`.repeat(6 - week);
            calendarBody += " </div>";
          }
          if (week === 6 && i !== monthDays) {
            calendarBody += " </div>";
          }
        }

        calendarBody += "</div>";

        let calendar = `
                <div class="calendar">
                    ${calendarTitle}
                    ${calendarBody}
                </div>
            `;
        document.querySelector(".warp").innerHTML = calendar;
      }
    </script>
  </body>
</html>
